<template>
  <div class="app-container mod-order-order">
    <!-- 查询区域 -->
    <el-form :model="queryParams" :ref="queryFormRef" inline v-show="showSearch" label-width="auto" @keyup.enter.native="handleQuery">
        <el-form-item label="订单号" prop="orderNumber">
          <el-input v-model="queryParams.orderNumber" placeholder="订单号" clearable style="width: 250px;"/>
        </el-form-item>
        <el-form-item label="下单时间" prop="createTimeBegin">
          <el-date-picker clearable v-model="queryParams.createTimeBegin" value-format="yyyy-MM-dd" type="date" placeholder="下单时间" style="width: 140px;">
          </el-date-picker> 至
        </el-form-item>
        <el-form-item prop="createTimeEnd">
          <el-date-picker clearable v-model="queryParams.createTimeEnd" value-format="yyyy-MM-dd" type="date" placehodelr="下单时间" style="width: 140px;">
          </el-date-picker>
        </el-form-item>
        <el-form-item label-width="0px">
          <el-button type="primary" icon="el-icon-search" @click="handleQuery">搜索</el-button>
          <el-button icon="el-icon-refresh" @click="resetQuery">重置</el-button>
        </el-form-item>
    </el-form>
    <!-- 查询区域-END -->

    <!-- 操作按钮区域 -->
    <div class="tool-bar-btn">
      <el-button type="warning" icon="el-icon-download" @click="handleExport" v-hasPerms="['mall:order:export']">导出</el-button>
      <div class="order-status-rd">
        <lam-dict-select type="radioButton" v-model="queryParams.status" dictCode="order_status" placeholder="订单状态 " @change="handleQuery" clearable />
      </div>
      <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
    </div>

    <!-- 表格区域 -->
    <div class="main" v-loading="loading">
      <div class="content">
        <div class="tit" :style="headerStyle">
          <el-row style="width:100%">
            <el-col :span="10"><span class="item product">商品</span></el-col>
            <el-col :span="3"><span class="item">单价 / 购买数量</span></el-col>
            <el-col :span="3"><span class="item">实付金额</span></el-col>
            <el-col :span="3"><span class="item">支付方式</span></el-col>
            <el-col :span="3"><span class="item">订单状态</span></el-col>
            <el-col :span="2"><span class="item">操作</span></el-col>
          </el-row>
        </div>
        <div class="prod" v-for="order in dataList" :key="order.id">
          <div class="prod-tit">
            <span>订单编号：{{order.orderNumber}}</span>
            <span>下单时间：{{order.createTime}}</span>
          </div>
          <div class="prod-cont">
            <el-row style="width:100%">
              <el-col :span="12">
                <div class="prod-item">
                  <div class="items name" v-for="orderItem in order.orderItems" :key="orderItem.id">
                    <div class="prod-image">
                      <img :src="resourceUrl + orderItem.pic" style="height:100px;width: 100px;">
                    </div>
                    <div class="prod-name">
                      <span>{{orderItem.prodName}}</span>
                      <span class="prod-info">{{orderItem.skuName}}</span>
                    </div>
                    <div class="prod-price">
                      <div class="price">￥{{orderItem.price}}</div>
                      <div class="prodCount">×{{orderItem.prodCount}}</div>
                    </div>
                  </div>
                </div>
              </el-col>
              <el-col :span="3" style="height: 100%;">
                <div class="cell">
                  <div>
                    <div class="totalAmt">￥{{order.payAmt}}</div>
                    <div class="dvyAmount" v-if="order.dvyAmount" >（含运费:￥{{order.dvyAmount}}）</div>
                    <div class="dvyAmount" v-else>（免运费）</div>
                    <div>共 <span style="color: #c00;">{{order.productNums}}</span> 件</div>
                  </div>
                </div>
              </el-col>
              <el-col :span="3" style="height: 100%;">
                <div class="cell">{{order.payTypeDictText}}</div>
              </el-col>
              <el-col :span="3" style="height: 100%;">
                <div class="cell">
                  <OrderStatus :value="order.status" :text="order.statusDictText" class="order-status"/>
                </div>
              </el-col>
              <el-col :span="3" style="height: 100%;">
                <div class="cell">
                    <!-- <button onclick="">打印订单</button><br> -->
                    <el-button type="primary" plain icon="el-icon-tickets" @click="handleDetail(order)" v-hasPerms="['mall:order:detail']">详情</el-button>
                </div>
              </el-col>
            </el-row>
          </div>
          <div class="remark">
            <div class="buyer-remark">
              <span>备注:{{order.remarks}}</span>
            </div>
          </div>
        </div>
      </div>
    </div>
    <pagination v-show="!loading" :total="total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize"  @pagination="getList" />

    <!-- 添加或修改对话框 -->
    <EditOrder ref="formDialog" @ok="getList" />

    <!-- 导出对话框 -->
    <ToExport ref="exportDialog" />

  </div>
</template>

<script>
import {hexToRGB} from '@/utils/cssUtil'
import {httpGet, httpDel} from '@/api';
import { IndexListMixin } from '@/components/mixins/IndexListMixin';
import EditOrder from './edit';
import OrderStatus from './OrderStatus';
import ToExport from '@/components/download/ToExport';

export default {
  name: "Order",
  mixins:[IndexListMixin],
  components: {
    EditOrder,
    ToExport,
    OrderStatus
  },
  data() {
    return {
      // 查询参数
      queryParams: {
        orderNumber: null,
        status: 0,
        createTimeBegin: null,
        createTimeEnd: null,
        pageNum: 1,
        pageSize: 10
      },
      url: {
      	exportXls: '/mall/order/export',
        base: '/mall/order/',
      	list: '/mall/order/list'
      }
    };
  },
  computed:{
    resourceUrl() {
      return this.$store.getters.resourceUrl
    },
    headerStyle(){
      return {
        "background-color": hexToRGB(this.$store.state.settings.theme, 12),
       }
    },
  },
  created() {
    this.getList();
  },
  mounted(){
  },
  methods: {
    getList() {
      this.loadData(this.url.list);
    },

    /** 查看详情按钮操作 */
    handleDetail(row) {
      const id = row.id || this.selectedRowKeys
      this.$refs.formDialog.toDetail("订单详情", httpGet(this.url.base + id));
    },

    /** 导出按钮操作 */
    handleExport() {
      this.exportData('订单导出', this.url.exportXls);
    },

  }
};
</script>

<style lang="scss" scoped>
  .order-status-rd{
    display: inline-block;
    margin-left: 10px;
    vertical-align: bottom;
  }
.mod-order-order {
  .tit {
    display: flex;
    height: 45px;
    align-items: center;
    border: 1px #dddee1 solid;
    margin-bottom: 1px;
    background: #f0eefa;
  }
  .tit .cell {
    padding: 0 10px;
    width: 10%;
    text-align: center;
    font-weight: bold;
  }
  .tit .product {
    width: 25%;
    margin-left: 142px;
  }
  .prod-tit {
    padding: 10px;
    background: #f8f8f9;
    border-left: 1px solid #dddee1;
    border-top: 1px solid #dddee1;
    border-right: 1px solid #dddee1;
  }
  .prod-tit span {
    margin-right: 15px;
  }
  .prod-cont {
    display: flex;
    border-top: 1px solid #dddee1;
    border-bottom: 1px solid #dddee1;
    border-left: 1px solid #dddee1;
    color: #495060;
  }
  .prod-cont .cell {
    display: flex;
    display: -webkit-flex;
    align-items: center;
    justify-content: center;
    padding: 10px;
    // width: 10%;
    border-right: 1px solid #dddee1;
    text-align: center;
    height: 100%;
  }
  .prod-cont .prod-item {
    // width: 38%;
    display: flex;
    flex-direction: column;
    border-right: 1px solid #dddee1;
  }
  .prod-name {
    width: 55%;
    text-align: left;
  }
  .prod-price {
    position: absolute;
    right: 40px;
    text-align: right;
    margin-top: 21px;
    color: blue;
  }
  .prod-price .price {
    margin-bottom: 10px;
  }
  .prod-price .prodCount {

  }
  .prod-name .prod-info {
    display: block;
    color: #80848f;
    margin-top: 30px;
  }
  .prod-cont .items.name {
    display: flex;
    position: relative;
    padding: 20px;
    // height: 100px;
    border-bottom: 1px solid #dddee1;
  }
  .prod-cont .items.name:last-child {
    border-bottom: none;
  }
  .prod-image {
    margin-right: 20px;
    width: 100px;
    height: 100px;
  }
  .prod-image img {
    width: 100px;
    height: 100px;
  }
  .cell .totalAmt {
    color: #c00;
    margin-bottom: 5px;
  }
  .cell .dvyAmount {
    margin-bottom: 5px;
  }
  .cell .order-status {
    font-size: 14px;
    font-weight: bold;
  }
  .prod .remark {
    width: 100%;
    height: 50px;
    line-height: 50px;
    background-color: #e8f7f6;
    border-left: 1px solid #dddee1;
    border-right: 1px solid #dddee1;
    border-bottom: 1px solid #dddee1;
    margin-bottom: 20px;
  }
  .buyer-remark {
    padding: 0 20px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }

  .empty-tips {
    display: block;
    width: 100%;
    text-align: center;
    margin: 50px 0;
    color: #999;
  }
}
</style>
